{% extends "upload/dataset_upload_base.html" %}
{% load i18n %}
{% load static %}
{% load client_lib_tags %}

{% block body_class %}data data-list upload{% endblock %}

{% block title %} {% trans "Upload Dataset Step: CSV Field Mapping" %} - {{ block.super }} {% endblock %}

{% block head %}
{{ block.super }}
{% endblock %}

{% block body %}
<div class="span7">
  <h2> {% trans "Geospatial Data" %} "{{ dataset_name }}" </h2>

    {% if present_choices %}
        <p>{% trans "Please indicate which attributes contain the latitude and longitude coordinates in the CSV data." %}</p>
        {% if guessed_lat_or_lng %}
            <p>{% blocktrans %}With this data, GeoNode was able to guess which attributes contain the
                latitude and longitude coordinates, but please confirm that the correct
                attributes are selected below.{% endblocktrans %}</p>
        {% endif %}

        <form method="POST" id="csvForm" role="form">
          {% csrf_token %}
          {% if error %}
          <div class="msg alert alert-error">{{ error }}</div>
          {% endif %}
          <div>
            <label for="lat" style="display: inline-block; width: 75px">{% trans "Latitude" %}</label>
            <select id="lat" name="lat">
              <option value="None">{% trans "Select an attribute" %}</option>
              {% for option in point_candidates %}
              <option value="{{ option }}"
              {% if selected_lat and selected_lat == option %}
              selected="selected"
              {% endif %}
              >{{ option }}</option>
              {% endfor %}
            </select>
          </div>
          <div style="margin: 10px 0">
            <label for="lat" style="display: inline-block; width: 75px">{% trans "Longitude" %}</label>
            <select id="lng" name="lng">
              <option value="None">{% trans "Select an attribute" %}</option>
              {% for option in point_candidates %}
              <option value="{{ option }}"
              {% if selected_lng and selected_lng == option %}
              selected="selected"
              {% endif %}
              >{{ option }}</option>
              {% endfor %}
            </select>
          </div>

          <a href="{% dataset_upload_url %}" class="btn btn-primary pull-left">{% trans "Cancel" %}</a> &nbsp;
          <button id='next' class="btn btn-default" type="submit" value="{% trans 'Next' %}"> Next
              <i id="next-spinner" class="fa fa-spinner fa-spin hide"></i>
          </button>
          <div id="upload-status"></div>
        </form>

        <div id="csv-status">
            <div id="status">
            </div>
        </div>

    {% else %}
        <p>{% blocktrans %}We did not detect columns that could be used for the latitude and longitude.
        Please verify that you have two columns in your csv file that can be used for
        the latitude and longitude.{% endblocktrans %}</p>
    {% endif %}
</div>
{% endblock %}

{% block extra_script %}
{{ block.super }}
<script data-main="{% static 'geonode/js/upload/csv.js' %}"
  src="{% static 'lib/js/require.js' %}">
</script>
<script type="text/javascript">
{% autoescape off %}
{% if async_upload %}
//enableUploadProgress('timeForm');
{% endif %}
{% endautoescape %}
</script>
{% endblock %}
